<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
	   <title>Example Blog</title>
	   <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
	
		<style type="text/css">

			h1 {
				font-weight: bold;
				font-size: 120%;
			}

			p {
				margin-top: 1em;
			}

			h2, h3 {
				font-weight: bold;
			}

			#hd {
				background-color: #ccc;
				padding: .25em .5em;
				margin-bottom: 1em;
			}

			#ft {
				margin-top: 1em;
				border-top: solid 1px #000;
			}
			
			#ft p {
				margin-top: 0;
			}

			#query {
				width: 8em;
			}

			#news {
				margin-top: 1em;
			}

		</style>
	
	</head>

	<body>

		<div id="doc" class="yui-t1">
			<div id="hd" role="banner"><h1>Example Blog</h1></div>
			<div id="bd">
				
				<div id="yui-main">
					<div class="yui-b">
						<div class="yui-gc">

							<div role="main" class="yui-u first">
								<h2 id="main-header">Current Post</h2>
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>								
							</div>

							<div class="yui-u">

								<div id="search" role="search">
									<form>
										<input type="text" id="query" name="query">
										<input type="button" name="btn-search" value="Search">
									</form>
								</div>

								<div id="news" role="complementary">
									<h3>Current News</h3>

									<ul>
										<li><a href="#">News Story 1</a></li>
										<li><a href="#">News Story 2</a></li>
										<li><a href="#">News Story 3</a></li>
										<li><a href="#">News Story 4</a></li>
										<li><a href="#">News Story 5</a></li>
										<li><a href="#">News Story 6</a></li>
										<li><a href="#">News Story 7</a></li>
										<li><a href="#">News Story 8</a></li>
										<li><a href="#">News Story 9</a></li>
										<li><a href="#">News Story 10</a></li>												
									</ul>
									
								</div>

							</div>

						</div>
					</div>
				</div>
				<div role="navigation" class="yui-b">
					<h3>Recent Posts</h3>
					<ul>
						<li><a href="#">Post 1</a></li>
						<li><a href="#">Post 2</a></li>
						<li><a href="#">Post 3</a></li>
						<li><a href="#">Post 4</a></li>
						<li><a href="#">Post 5</a></li>
						<li><a href="#">Post 6</a></li>
						<li><a href="#">Post 7</a></li>
						<li><a href="#">Post 8</a></li>
						<li><a href="#">Post 9</a></li>
						<li><a href="#">Post 10</a></li>												
					</ul>
				</div>

			</div>
			<div id="ft" role="contentinfo">
				<p>Copyright &#169; 2009 Example Blog Inc. All rights reserved.</p>
			</div>
		</div>

	</body>
</html>